<template>
    <el-dialog :modal="false" :show-close="false" :visible.sync="visible" append-to-body width="20%">
        <div class="need-fee" style="z-index: 100000;">
            <div class="need-fee-close">
                <i @click="visible=false" class="el-icon el-icon-close color-999 cursor-pointer font-12"></i>
            </div>
            <div class="text-center mt-30">
                <div v-if="step==1">
                    <div class="color-999 font-14">付费长视频</div>
                    <div class="color-333 mt-15 font-18">付费后观看长视频</div>
                    <div class="mt-50">
                        <span class="font-35 weight-bold color-pink" v-if="user_info && user_info.is_vip">{{creation.vip_price}}</span>
                        
                        <span class="font-35 weight-bold color-pink" v-else>{{creation.fee}}</span>
                        <span class="font-18 color-pink pl-4">{{$store.state.config.coin_name}}</span>
                    </div>
                    <div class="mt-5" v-if="user_info && user_info.is_vip">
                        <span class="font-14 color-999" style="text-decoration: line-through;">原价{{creation.fee}}{{$store.state.config.coin_name}}</span>
                    </div>
                    <div class="mt-20" style="width:400px">
                        <div @click="step=2" class="need-fee-recharge cursor-pointer">立即支付</div>
                    </div>
                </div>
                <div v-else>
                    <div class="color-pink mt-20 font-18" v-if="user_info && user_info.is_vip">付费{{creation.vip_price}}{{$store.state.config.coin_name}}观看视频</div>
                    <div class="color-pink mt-20 font-18" v-else>付费{{creation.fee}}{{$store.state.config.coin_name}}观看视频</div>

                    <div class="text-left mt-30" style="width:360px;margin-left:20px">
                        <div class="color-333">输入支付密码</div>
                        <div>
                            <el-input :autofocus="true" id="myInput" maxlength="6" placeholder="请输入内容" ref="pwd" style="opacity: 0;position: absolute;" v-model="msg"></el-input>
                            <ul class="pwd-wrap">
                                <li :class="{ selectBox: msgLength > 0 }" :style="msg.length == 0 ? 'border: #FF1C6D 1px solid' : ''">
                                    <i v-if="msgLength > 0"></i>
                                </li>
                                <li :style="msg.length == 1 ? 'border: #FF1C6D 1px solid' : ''">
                                    <i v-if="msgLength > 1"></i>
                                </li>
                                <li :style="msg.length == 2 ? 'border: #FF1C6D 1px solid' : ''">
                                    <i v-if="msgLength > 2"></i>
                                </li>
                                <li :style="msg.length == 3 ? 'border: #FF1C6D 1px solid' : ''">
                                    <i v-if="msgLength > 3"></i>
                                </li>
                                <li :style="msg.length == 4 ? 'border: #FF1C6D 1px solid' : ''">
                                    <i v-if="msgLength > 4"></i>
                                </li>
                                <li :style="msg.length == 5 ? 'border: #FF1C6D 1px solid' : ''">
                                    <i v-if="msgLength > 5"></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="mt-20" style="width:400px">
                        <div @click="pay" class="need-fee-recharge cursor-pointer">立即支付</div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
        creation: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    computed: {
        user_info() {
            return this.$store.state.user.user
        },
    },
    watch: {
        msg(curVal) {
            if (/[^\d]/g.test(curVal)) {
                this.msg = this.msg.replace(/[^\d]/g, '')
            } else {
                this.msgLength = curVal.length
            }
        },
    },
    data() {
        return {
            visible: false,
            step: 1,
            msg: '',
            msgLength: '',
            loading: false,
        }
    },
    methods: {
        pay() {
            if (this.msg.length != 6) {
                this.$message.warning('请输入6位数字支付密码')
                return false
            }
            let param = {
                fun_password: this.msg,
            }
            if (this.loading) {
                return false
            }
            this.loading = true
            this.$request
                .post('/creation/pay/' + this.creation.creation_id, param)
                .then((res) => {
                    this.$message.success('支付成功')
                    this.$emit('donePay', res)
                    this.msg = ''
                    this.step = 1
                    this.visible = false
                })
                .catch((err) => {
                    if (err.code == 301) {
                        this.msg = ''
                        this.step = 1
                        this.visible = false
                        this.$emit('needRecharge')
                    }
                    this.$message({
                        message: err.message,
                        type: 'error',
                        customClass: 'super-message',
                    })
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>

<style lang="scss" scoped>
.need-fee {
    position: absolute;
    transition: 0.2s all;
    background: linear-gradient(to bottom, #ffe3ed, #fffbef);
    margin-left: 140%;
    width: 400px;
    height: 300px;
    left: calc(50% - 200px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-close {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    &-recharge {
        bottom: 20px;
        color: #fff;
        background: #ff1c6d;
        width: 80%;
        text-align: center;
        padding: 9px 0px;
        border-radius: 4px;
        margin-left: 10%;
        position: absolute;
    }
}

.pwd-wrap {
    width: 360px;
    height: 57px;
    padding-bottom: 1px;
    // margin: 0 auto;
    margin-left: -40px;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    cursor: pointer;
}

.pwd-wrap li {
    list-style-type: none;
    text-align: center;
    line-height: 57px;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    border: 1px solid #ddd;
    width: 50px !important;
    margin-right: 3px;
    background-color: #fff;
}

.pwd-wrap li i {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #525252;
    display: inline-block;
}
</style>